// 扩展webpack的配置
const path = require("path");
const { getPlugin, pluginByName,whenProd } = require("@craco/craco");

module.exports = {
  webpack: {
    alias: {
      "@": path.resolve(__dirname, "src"),
    },
    // 配置CDN
    configure:(webpackConfig) => {
      let cdn
      whenProd(() => {
        // key: 不参与打包的包（有dependencies依赖项中的key决定）
        // value：cdn文件中 挂载于全局的变量名称 为了替换之前在开发环境下
        webpackConfig.externals = {
          react:'React',
          'react-dom':'ReactDOM'
        }
        // 配置现成的cdn资源地址
        // 实际开发的时候 用公司自己花钱买的cdn
        cdn = {
          js:[
            'https://cdn.bootcdn.net/ajax/libs/react/18.0.0/umd/react.production.min.js',
            'https://cdn.bootcdn.net/ajax/libs/react-dom/18.0.0/umd/react-dom.production.min.js'
          ]
        }
      })
      // 通过htmlwebpackPlugin插件 在public/index.html 注入cdn资源url
      const {isFound,match} = getPlugin(
        webpackConfig,
        pluginByName('HtmlWebpackPlugin')
      )

      if(isFound) {
        // 找到了HtmlWebpackPlugin的插件
        match.options.cdn = cdn
      }
      return webpackConfig
    }
  },
};
